<template>
  <n-scrollbar style="height: 100%" @scroll="scrollChange">
    <n-collapse arrow-placement="right" :default-expanded-names="[0]">
      <n-collapse-item
        :title="item.courseDate"
        :name="i"
        v-for="(item, i) in scrollPageState.data"
        :key="i"
      >
        <div class="num-wrap">
          <div
            class="num-item"
            @click="courseItemChange(val, j + 1, item.courseDate)"
            v-for="(val, j) in item.courseExerciseIds"
            :key="j"
            :class="courseId === val ? 'active' : ''"
            >第{{ j + 1 }}节</div
          >
        </div>
      </n-collapse-item>
    </n-collapse>
    <empty
      v-if="scrollPageState.data.length === 0 && !scrollPageState.loading"
      style="height: 990px"
    />
    <n-divider
      style="font-size: 16px"
      v-if="!scrollPageState.loading && scrollPageState.data.length > 0"
    >
      {{ scrollPageState.finished ? '没有更多了' : '下拉加载更多' }}
    </n-divider>
  </n-scrollbar>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import { ChevronDownOutline, SearchSharp, ChevronForwardOutline } from '@vicons/ionicons5';
  import { CourseDateRecordInfo, getCourseDateRecord } from '@/api/course/index';
  import { useScrollPage } from '@/hooks/useScrollPage';
  import { useVModel } from '@vueuse/core';

  const props = defineProps({
    courseDate: {
      type: String,
      default: '',
    },
    courseId: {
      type: [String, Number],
      default: undefined,
    },
    courseIndex: {
      type: Number,
      default: 1,
    },
  });
  const emits = defineEmits(['change']);
  const courseDate = useVModel(props, 'courseDate', emits);
  const courseId = useVModel(props, 'courseId', emits);
  const courseIndex = useVModel(props, 'courseIndex', emits);
  const { scrollPageState, scrollChange, refreshData } = useScrollPage<CourseDateRecordInfo>({
    loadData: async (e) => {
      const result = await getCourseDateRecord(e);
      if (scrollPageState.pageNum === 1) {
        courseItemChange(result.records[0].courseExerciseIds[0], 1, result.records[0].courseDate);
      }
      return result;
    },
  });
  function courseItemChange(e, i, date) {
    courseId.value = e;
    courseIndex.value = i;
    courseDate.value = date;
    emits('change', e);
  }
</script>

<style scoped lang="less">
  ::v-deep(.n-collapse-item__header-main) {
    height: 36px;
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    padding: 0 36px;
  }
  ::v-deep(.n-collapse-item) {
    border-top: 0;
  }
  .num-item {
    height: 60px;
    border-radius: 12px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    margin: 0 12px;
    &.active {
      background-color: #fff;
      color: #eb6100;
    }
  }
</style>
